<template lang="">
  <h3>{{ $t("vipD") }}<span></span></h3>
  <div class="myVip">
    <div>
      <div class="level ant-row">
        <div class="line"></div>
        <div class="top ant-row">
          <div class="medal">
            {{ curLevelInfo.name || "" }}
          </div>
          <h5>{{ $t("dang-4") }} {{ user.member_level }}</h5>
          <div class="cumulative ant-row">
            <p>
              {{ $t("leiJ") }}<span>{{ currentUser.current_deposit }}</span>
            </p>
            <p>
              {{ $t("leiJ-0")
              }}<span>{{ currentUser.current_account_statement }}</span>
            </p>
          </div>
        </div>

        <div class="level_name ant-row">
          <ul>
            <li
              v-for="(item, index) in levelList"
              :key="'level-item-' + index"
              :class="item.hasActive ? 'active' : ''"
              @click="onSwitchLevelInfo(item.level)"
            >
              {{ item.name }}
            </li>
          </ul>
          <a-progress
            class="progress-container"
            :percent="curLevelInfo.level * 10"
            :show-info="false"
          />
        </div>

        <p class="next_level">
          {{ $t("juLi-1") }}
          {{
            (curNextLevelInfo && curNextLevelInfo.name) || ""
          }}，当前保级流水要求：<span>{{
            curLevelInfo.account_statement_hold
          }}</span>
        </p>
        <div class="bottom ant-row">
          <span>{{ $t("cunK") }}</span>
          <a-progress :percent="curDepositRatio" :show-info="false" />
          <span>晋级存款 {{ curNextLevelInfo.min_accumulated_deposit }}</span>
        </div>
        <div class="bottom ant-row">
          <span>{{ $t("liuS-1") }}</span>
          <a-progress :percent="curRunningWaterRatio" :show-info="false" />
          <span
            >晋级流水 {{ curNextLevelInfo.account_statement_promotion }}</span
          >
        </div>
      </div>

      <div class="vip_enjoy ant-row">
        <h5 class="title">{{ curLevelPrivilege.name }} {{ $t("vipJ") }}</h5>
        <ul>
          <li>
            <img :src="getAssetsImages('draw_num.png')" />
            <p class="item_num">{{ curLevelPrivilege.withdrawal_count_daily }}</p>
            <p>{{ $t("meiR-1") }}</p>
          </li>
          <li>
            <img :src="getAssetsImages('draw_money.png')" />
            <p class="item_num">{{ curLevelPrivilege.withdrawal_limit_daily }}</p>
            <p>{{ $t("meiR-2") }}</p>
          </li>
          <li>
            <img :src="getAssetsImages('promotion_gift.png')" />
            <p class="item_num">
              {{ curLevelPrivilege.single_withdraw_min_amount }}
            </p>
            <p>单笔最少提款限额</p>
          </li>
          <li>
            <img :src="getAssetsImages('draw_num.png')" />
            <p class="item_num">
              {{ curLevelPrivilege.single_withdraw_max_amount }}
            </p>
            <p>单笔最多提款限额</p>
          </li>
          <li>
            <img :src="getAssetsImages('draw_num.png')" />
            <p class="item_num">{{ curLevelPrivilege.agent_award_max_amount }}</p>
            <p>每月最大代理彩金</p>
          </li>
          <li>
            <img :src="getAssetsImages('bank_discount.png')" />
            <p class="item_num">{{ curLevelPrivilege.deposit_interval }}</p>
            <p>存款间隔时间</p>
          </li>
          <li>
            <img :src="getAssetsImages('usdt_wtd.png')" />
            <p class="item_num">{{ curLevelPrivilege.withdrawal_interval }}</p>
            <p>提款间隔时间</p>
          </li>
        </ul>
      </div>

      <!-- <div  class="vip_promotion ant-row">
     <h5  class="title">VIP等级返水明细</h5>

     <ul >
      <li ><span  class="primary_color">{{ $t('200Y') }}</span><span >{{ $t('zuiD') }}</span></li>
      <li ><span  class="primary_color">0%</span><span >{{ $t('hong-0') }}</span></li>
      <li ><span  class="primary_color">0</span><span >{{ $t('zuiG') }}</span></li>
      <li ><span  class="primary_color">{{ $t('0Bei') }}</span><span >{{ $t('liuS-2') }}</span></li>
      <li ><span  class="primary_color">{{ $t('meiY-1') }}</span><span >{{ $t('ciSh-0') }}</span></li>
      <li ><span  class="primary_color">{{ $t('wu') }}</span><span >{{ $t('haoL') }}</span></li>
      <li ><span  class="primary_color">0.6%</span><span >{{ $t('188T') }}</span></li>
      <li ><span  class="primary_color">0.7%</span><span >{{ $t('goldg-1') }}</span></li>
      <li ><span  class="primary_color">0.4%</span><span >{{ $t('zhen-3') }}</span></li>
      <li ><span  class="primary_color">0.7%</span><span >{{ $t('dian-7') }}</span></li>
      <li ><span  class="primary_color">0.6%</span><span >{{ $t('qiPa-0') }}</span></li>
      <li ><span  class="primary_color">0.6%</span><span >{{ $t('buYu-0') }}</span></li>
      <li ><span  class="primary_color">0.6%</span><span >{{ $t('dian-8') }}</span></li>
     </ul>
    </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { getAssetsImages } from "@/utils";
import { getCustomerLevel } from "@/api/account";
import { useI18n } from "vue-i18n";
import { useUserStore } from "@/stores/userInfo";
const { t } = useI18n();
const { user } = useUserStore();

const currentUser = ref<any>({});
const levelList = ref<any>([]);
// 当前等级
const curLevelInfo = ref<any>({});
// 当前下个等级
const curNextLevelInfo = ref<any>({});
// 当前游戏特权
const curLevelPrivilege = ref<any>({});

const curDepositRatio = computed(() => {
  let current_deposit = currentUser.value
    ? currentUser.value.current_deposit || 0
    : 0;
  let levelDeposit = curNextLevelInfo.value
    ? curNextLevelInfo.value.min_accumulated_deposit || 0
    : 0;
  if (current_deposit === 0 && levelDeposit === 0) {
    return 0;
  }

  let depositRatio = (current_deposit / levelDeposit) * 100;
  return depositRatio.toFixed(0);
});

const curRunningWaterRatio = computed(() => {
  let current_account_statement = currentUser.value
    ? currentUser.value.current_account_statement || 0
    : 0;
  let account_statement_promotion = curNextLevelInfo.value
    ? curNextLevelInfo.value.account_statement_promotion || 0
    : 0;
  if (current_account_statement === 0 && account_statement_promotion === 0) {
    return 0;
  }

  let ratio = (current_account_statement / account_statement_promotion) * 100;
  return ratio.toFixed(0);
});

function onSwitchLevelInfo(level: number) {
    levelList.value = levelList.value.map((item: any) => {
        item.hasActive = false;
        if (item.level === level) {
            item.hasActive = true;
            curLevelPrivilege.value = item;
        }
        return item;
    });
}

function getMemberVipInfo() {
  getCustomerLevel().then((res: any) => {
    if (res && res.current) {
      currentUser.value = res.current;
    }

    if (res && res.level) {
      curLevelInfo.value = res.level.current_level;
      curNextLevelInfo.value = res.level.next_level;

      if (Array.isArray(res.list)) {
        levelList.value = res.list.map((item: any) => {
          item.hasActive = false;
          if (item.level === res.level.current_level.level) {
            item.hasActive = true;
          }
          return item;
        });
      }
      curLevelPrivilege.value = res.level.current_level;
    }
  });
}

onMounted(() => {
  getMemberVipInfo();
});
</script>

<style lang="less" scoped>
.myVip .level {
  background-color: #fffaf1;
  padding-top: 13px;
  padding-bottom: 13px;
}

.myVip .level .line {
  width: 100%;
  height: 2px;
  background-color: #ffc57e;
}

.myVip .level .top {
  position: relative;
}

.myVip .level .top .medal {
  width: 108px;
  height: 115px;
  background-image: url(@/assets/images/medal.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  margin-left: 20px;
  text-align: center;
  padding-top: 60px;
  color: #ac6700;
  float: left;
  margin-right: 23px;
}

.myVip .level .top h5 {
  color: #ea8236;
  font-size: 16px;
  margin-top: 18px;
  margin-bottom: 11px;
}

.myVip .level .top .cumulative {
  height: 20px;
}

.myVip .level .top .cumulative p {
  float: left;
  color: #666;
}

.myVip .level .top .cumulative p span {
  color: #333;
}

.myVip .level .top .cumulative p:last-child {
  float: right;
  margin-right: 194px;
}

.myVip .level .top p.ts {
  width: 100%;
  color: #666;
  margin-top: 11px;
}

.myVip .level .top .vip_details {
  width: 98px;
  height: 32px;
  line-height: 32px;
  // background-image: url(@/assets/images/vip_details_bg.png);
  background-position: 0;
  background-repeat: none;
  background-size: cover;
  color: #fff;
  font-size: 12px;
  padding-left: 8px;
  position: absolute;
  top: 37px;
  right: 0;
  cursor: pointer;
}

.myVip .level .top .vip_details i {
  padding-left: 7px;
}

.myVip .level .level_name {
  width: 94%;
  margin: 12px auto 0;
}

.myVip .level .level_name ul li {
  width: 9%;
  height: 30px;
  float: left;
  text-align: center;
  color: #333;
  cursor: pointer;
}

.myVip .level .level_name ul li.active {
  background-image: url();
  background-repeat: no-repeat;
  background-size: 52px 30px;
  background-position: top;
  color: #fff;
}

.myVip .level .level_name .ant-progress-line {
  width: 760px;
  margin-left: 35px;
}

.myVip .level .level_name .ant-progress-inner {
  background-color: #d9d3c7;
}

.myVip .level .next_level {
  padding-left: 64px;
  margin-top: 17px;
}

.myVip .level .bottom {
  padding-left: 64px;
  margin-top: 11px;
}

.myVip .level .bottom span {
  float: left;
}

.myVip .level .bottom .ant-progress-line {
  width: 337px;
  float: left;
  margin: 0 14px;
}

.myVip .level .bottom .ant-progress-inner {
  background-color: #f5efe3;
}

.myVip h5.title {
  font-weight: 700;
  font-size: 15px;
  padding-left: 12px;
  position: relative;
  margin-bottom: 11px;
}

.myVip h5.title:before {
  content: "";
  width: 4px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;
  border-radius: 2px;
}

.myVip .vip_enjoy {
  margin-top: 36px;
}

.myVip .vip_enjoy button {
  float: right;
  width: 90px;
  height: 30px;
}

.myVip .vip_enjoy ul li {
  width: 128px;
  height: 150px;
  float: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.myVip .vip_enjoy ul li:nth-child(odd) {
  background-color: #fffbf1;
}

.myVip .vip_enjoy ul li:nth-child(2n + 2) {
  background-color: #fff2e1;
}

.myVip .vip_enjoy ul li img {
  width: 50px;
}

.myVip .vip_enjoy ul li p.item_num {
  font-weight: 600;
  margin: 19px 0 11px 0;
}

.myVip .vip_enjoy ul li p.item_p {
  font-weight: 600;
  margin: 10px 0 7px 0;
}

.myVip .vip_enjoy ul li span {
  font-size: 12px;
}

.myVip .vip_promotion {
  margin-top: 36px;
}

.myVip .vip_promotion ul li {
  width: 150px;
  height: 105px;
  float: left;
  margin-bottom: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.myVip .vip_promotion ul li span {
  line-height: 22px;
}

.myVip .vip_promotion ul li:nth-child(odd) {
  background-color: #fffbf1;
}

.myVip .vip_promotion ul li:nth-child(2n + 2) {
  background-color: #fff2e1;
}

.progress-container {
  .ant-progress-bg {
    height: 12px !important;
  }
}
</style>
